<include file="/public/header" />

<style>
  .layui-card-body {
    padding-left: 0;
  }

  .layui-form-item .layui-input-inline {
    width: 220px;
  }

  body {
    background-color: #fff;
  }

  .proints {
    margin: 10px 0;
  }

  .title {
    font-weight: bold;
    padding: 15px 0;
    font-size: 18px;
  }

  .products{
    width: 100%;
  }
  .products td,
  .products th {
    padding: 12px 15px;
    box-sizing: border-box;
    border: 1px solid #ebeef5;
  }

  .products .label {
    background-color: #f5f7fa;
    font-weight: bold;
  }

  .width1 {
    width: 23%;
    float: left;
    margin-right: 2%;
  }

  .subbord {
    border: 1px solid #ebeef5;
    padding: 20px 2%
  }

  .subbord table {
    margin: 20px 0;
    width: 100%;
  }

  .width2 {
    width: 50%;
    float: left;
  }

  .width3 {
    width: 25%;
    float: left;
  }
</style>

<div class="layui-fluid">
  <button type="button" class="layui-btn proints">打印任务单</button>
  <div class="layui-row">
    <div class="width1">
      <div class="title">生产单</div>
      <table class="products">
        <tbody>
          <tr>
            <td class="label" colspan="1">订单id</td>
            <td class="content" colspan="0">{$data.ordersn}</td>
            <td class="label" colspan="1">客户名称</td>
            <td class="content" colspan="0">{$data.custom}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">生产班组</td>
            <td class="content" colspan="0">{$data.team}</td>
            <td class="label" colspan="1">接单人</td>
            <td class="content" colspan="0">{$data.receiver}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">交货日期</td>
            <td class="content" colspan="0">{$data.deliveday}</td>
            <td class="label" colspan="1">下单时间</td>
            <td class="content" colspan="1">{$data.create_time}</td>
          </tr>
          <tr>
            <td class="label" colspan="1">审核人</td>
            <td class="content" colspan="0">{$data.placer|default='无'}</td>
            <td class="label" colspan="1">下单人</td>
            <td class="content" colspan="0">{$data.reviewer|default='无'}</td>
          </tr>
        </tbody>
      </table>
      <div class="title">添加新产品</div>
      <div class="subbord">
        <form class="layui-form layui-form-pane">
          <input type="text" name="id" hidden="" />
          <!-- <div class="layui-form-item">
            <label class="layui-form-label">{:__('生产ID')}</label>
            <div class="layui-input-block">
              <input value="{$data.ordersn}" readonly disabled class="layui-input" />
            </div>
          </div> -->
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('名称')}</label>
            <div class="layui-input-block">
              <input name="" value="" placeholder="{:__('请输入名称')}" type="text" class="layui-input"
                lay-verify="required" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('规格')}</label>
            <div class="layui-input-block">
              <input name="" value="" placeholder="{:__('请输入规格')}" type="text" class="layui-input"
                lay-verify="required" />
            </div>
          </div>
          <!-- <div class="layui-form-item">
            <label class="layui-form-label">{:__('数量')}</label>
            <div class="layui-input-block">
              <input name="numbers" id="tipinput" value="" placeholder="{:__('请输入数量')}" type="number"
                class="layui-input" lay-verify="required" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('备注')}</label>
            <div class="layui-input-block">
              <input name="remark" value="" placeholder="{:__('请填写备注')}" type="text" class="layui-input" />
            </div>
          </div> -->
          <div class="layui-form-item">
            <label class="layui-form-label">{:__('选择配方')}</label>
            <div class="layui-input-block">
              <div class="peifang" name="peifang"></div>
            </div>
          </div>
          <table class="products" id="products">
          </table>
          <div class="layui-footer layui-form-item layui-center">
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog">
              {:__('取消')}
            </button>
            <button class="layui-btn" lay-add="{:url('/system/morder/edit')}" lay-filter="submitPage" lay-submit>
              {:__('提交')}
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="width2">
      <div class="title">生产产品列表   <button type="button" class="layui-btn proints">添加本订单关联产品</button>
      </div>
      <table class="products">
        <thead>
          <tr>
            <th class="label">ID</th>
            <th class="label">名称</th>
            <th class="label">规格</th>
            <th class="label">数量</th>
            <th class="label">单位</th>
            <th class="label">配方ID</th>
            <th class="label">配方明细</th>
            <th class="label">备注</th>
            <th class="label">添加时间</th>
            <th class="label">备注</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <div class="width3">
      <div class="title">该生产单预估消耗原材料</div>
    </div>
  </div>
</div>
<include file="/public/footer" />
<include file="/public/static" />

<script>
  layui.use('dropdown', function () {
    var formula = {$formula|raw};
  var datas = []; //配方数据
  var xmd = xmSelect.render({
    el: '.peifang',
    tips: '请选择配方',
    initValue: [],
    name: 'peifang',
    filterable: true,
    radio: true,
    repeat: true,
    clickClose: true,
    cascader: {
      show: true,
      strict: true,
      indent: 250
    },
    prop: {
      name: 'title',
      value: 'id',
    },
    tree: {
      show: true,
      strict: false,
      showLine: false,
      simple: true,
    },
    model: {
      icon: 'hidden',
      label: {
        type: 'text'
      }
    },
    theme: {
      color: '#1890FF'
    },
    data() {
      return formula
    },
    on: function (onresult) {
      //change, 此次选择变化的数据,数组
      var change = onresult.change;
      // 开始POST提交数据
      var number = layui.$("#tipinput").val();
      getdratable(change[0]['id'], number);

    },
  })
  //输入框的值改变时触发
  layui.$("#tipinput").on("input", function (e) {
    //获取input输入的值
    if(datas.length > 0){
      dratable(datas, e.delegateTarget.value);
    }
  });
  //请求ID并渲染表格
  var getdratable = function (id, number) {
    layui.$.ajax({
      url: '{:url("/system/formula/fadd")}',
      type: 'get',
      dataType: 'json',
      data: {
        id: id
      },
      success(data) {
        datas = [];
        if (data.code == 200) {
          datas = data.data.list;
          dratable(data.data.list, number);
        }
      }
    });
  }
  // 根据数据渲染表格
  var dratable = function (data = [], number = 0) {
    number = Number(number);
    var html = '<thead><tr><th class="label">配方原材料</th><th class="label">配方材料重量</th><th class="label">材料单价</th><th class="label">数量</th><th class="label">总重</th><th class="label">总价</th></tr></thead><tbody>';
    layui.$.each(data, function (index, type) {
      var unit = 'KG';
      if (type.unit == 'kg') {
        var unit = 'KG';
      } else if (type.unit == 'ton') {
        var unit = '吨';
      }
      html += '<tr>';
      html += '<td class="content" colspan="0">' + type.matitle + '</td>';
      html += '<td class="content" colspan="0">' + type.size + unit + '</td>';
      html += '<td class="content" colspan="0">' + type.price + '元/' + unit + '</td>';
      html += '<td class="content" colspan="0"> X' + number + '</td>';
      html += '<td class="content" colspan="0">' + Number(type.size * number) + unit + '</td>';
      html += '<td class="content" colspan="0">' + Number(type.size * type.price * number) + '元</td>';
      html += '</tr>';
    });
    html += '</tbody>';
    layui.$('#products').html(html);
    console.log(html);
  }
});
</script>